<template>
	<view class="container">
		<navagationBar :backgroundColor="backgroundColor">
			<template>
				<view class="action" :style="{ height: `${getSystemInfo.menuHeight}px` }">
					<view class="a-btn" :class="{'active':!showHome}" :style="{
            width: showBack ? '174rpx' : 'auto',
            border: showBack ? '1rpx solid #E3E6EB' : 'none'
          }">
						<uni-icons v-if="showBack" class="icon" type="back" :color="fontColor" size="20"
							@click="handleAction('back')">
						</uni-icons>
						<u-icon name="home" v-if="showHome" :color="fontColor" size="40" @click="handleAction('home')">
						</u-icon>
					</view>
					<view class="a-title" :style="{color: fontColor,left:marginLeft}">{{ title }}</view>
				</view>
			</template>
		</navagationBar>
	</view>
</template>

<script>
	import iIndex from '@/static/img/tabbar/ic_index.png'
	import navagationBar from '@/components/navigationBar.vue'
	import {
		mapGetters
	} from 'vuex'
	export default {
		components: {
			navagationBar
		},
		props: {
			title: {
				type: String,
				default: ''
			},
			backgroundColor: {
				type: String,
				default: '#fff'
			},
			// 是否使用自定义返回逻辑（包括返回上级和回到首页）
			customBack: {
				type: Boolean,
				default: false
			},
			// 是否显示返回按钮
			showBack: {
				type: Boolean,
				default: true
			},
			showHome: {
				type: Boolean,
				default: true
			},
			fontColor: {
				type: String,
				default: '#000000'
			},
			marginLeft: {
				type: String,
				default: '50%'
			}
		},
		data() {
			return {
				iIndex,
			};
		},
		computed: {
			...mapGetters('global', ['getSystemInfo'])
		},
		methods: {
			async handleAction(type) {
				if (type === 'home') {
					if (!this.customBack) {
						uni.switchTab({
							url: '/pages/index/index/index'
						})
					}
					this.$emit('home')
				} else {
					if (!this.customBack) {
						// 获取页面栈
						const pages = getCurrentPages()
						// 类似通过分享进来时,页面栈只有当前页面,再点击返回键时回到首页
						if (pages.length === 1) {
							uni.switchTab({
								url: '/pages/index/index/index'
							})
						}
						uni.navigateBack()
					}
					this.$emit('back')
				}
			},
		},
		activated() {
			uni.setNavigationBarTitle({
				title: '新的标题'
			});
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		.action {
			display: flex;

			.a-btn {
				display: flex;
				// align-items: center;
				justify-content: space-between;
				max-width: 174rpx;
				border: 1rpx solid #E3E6EB;
				border-radius: 32rpx;
				padding: 0 24rpx;
				box-sizing: border-box;

				.icon {
					width: 50%;

					/deep/ text {
						display: inline-block !important;
						width: 100%;
					}

					&::after {
						display: inline-block;
						content: "";
						width: 1px;
						height: 16px;
						position: absolute;
						top: 50%;
						transform: translateY(-50%);
						background-color: #E7E7E7;
					}
				}

				image {
					width: 19px;
					height: 19px;
				}
			}

			.a-title {
				position: relative;
				left: 50%;
			}

			.active {
				border: none !important;

				.icon {
					&::after {
						background-color: #fff !important;
					}
				}

			}

		}
	}
</style>
